(function($) {
    var Carousel = function(poster) { //实例化之后，方法中的this全部指向，实例化后的对象，进而引用位于原型上的方法
        var self = this;
        //保存单个旋转木马对象，防止对象被改变
        this.poster = poster; //保存在this上
        //找到轮播区的对象
        this.posterItemMain = this.poster.find("ul.poster-list");
        //保存切换按钮
        // this.nextBtn = this.poster.find("div.poster-next-btn");
        // this.prevBtn = this.poster.find("div.poster-prev-btn");
        //第一帧的图片
        this.posterItems = poster.find("li.poster-item");
        console.log(this.posterItems.length);
        //当总图片个数为偶数张的时候，就复制一张，插入到容器中，为了保证下面postFirstItem postLastItem获取最新的数据，需紧接着posterItems来插入
        if (this.posterItems.length == 0) {
            this.posterItemMain.append(this.posterItems.eq(0).clone()); //把第一帧克隆一份，插入到容器中
            this.posterItems = this.posterItemMain.children(); //通过父容器的子元素来更新最小帧数
        }

        this.postFirstItem = this.poster.find("li.poster-item").eq(0);
        this.postLastItem = this.poster.find("li.poster-item").last();

        /*定义旋转的标识，当为true时改变*/
        this.rotateFlag = true;
        this.order = 0;
        this.timer = null;
        this.holdBack = function(event) { event.preventDefault(); }
            //默认配置参数
            // 宽度设为一屏宽
        var $width = $("body").width();
        console.log($width);
        this.setting = {
            width: $width,
            height: 600, //幻灯片高度
            postWidth: 100, //最前面照片宽度
            postHeight: 135, //最前面照片高度
            scale: '0.9', //图片缩放比例
            speed: 300, //切换速度
            "autoPlay": true,
            "delay": 5000,
            verticalAlign: "middle" //广告位置
        };
        $.extend(this.setting, this.getSetting()); //取得html中data-setting并扩展到this.setting上
        this.setSettingValue();
        this.setPosterPosition();
        // this.nextBtn.click(function() {
        //     if (self.rotateFlag) {
        //         self.rotateFlag = false;
        //         self.carouseRotate("right");
        //     }
        // });
        // this.prevBtn.click(function() {
        //     if (self.rotateFlag) {
        //         self.rotateFlag = false;
        //         self.carouseRotate("left");
        //     }
        // });
        this.ocaroursel = document.getElementsByClassName("caroursel");
        this.ocaroursel[0].addEventListener("touchstart", function(e) {
            console.log(e);
            startX = e.changedTouches[0].pageX,
                startY = e.changedTouches[0].pageY;
        }, false)
        this.ocaroursel[0].addEventListener("touchmove", function(e) {
            document.addEventListener('touchmove', self.holdBack, false);
            //获取滑动屏幕时的X,Y
            endX = e.changedTouches[0].pageX,
                endY = e.changedTouches[0].pageY;
            //获取滑动距离
            distanceX = endX - startX;
            distanceY = endY - startY;
            //判断滑动方向
            if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
                // console.log('往右滑动');
                if (self.rotateFlag) {
                    self.rotateFlag = false;
                    self.carouseRotate("right");
                }
            } else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {
                // console.log('往左滑动');
                if (self.rotateFlag) {
                    self.rotateFlag = false;
                    self.carouseRotate("left");
                }
            }
        }, false);
        this.ocaroursel[0].addEventListener("touchend", function() {
                document.removeEventListener('touchmove', self.holdBack, false);
            })
            // 是否开启自动播放
            // this.autoPlay();
    };


    Carousel.init = function(posters) {
        var _self = this; //这个this指向的调用上下文，指的是Carousel
        posters.each(function() {
            new _self($(this)); //这个this指向的是当前的一个poster，遍历后的poster，当前上下文
        });
    }; //创建类中初始化的方法，在此类中用来处理在页面中所有传进来的集合


    Carousel.prototype = { //插件
        //设置配置参数值，来控制基本高度 宽度
        setSettingValue: function() {
            this.poster.css({
                width: this.setting.width,
                height: this.setting.height
            });
            this.posterItemMain.css({
                width: this.setting.width,
                height: this.setting.height
            });
            //计算切换按钮宽度
            var w = (this.setting.width - this.setting.postWidth) / 2;
            var h = this.setting.postHeight;
            // this.prevBtn.css({
            //     width: w,
            //     height: h,
            //     zIndex: Math.ceil(this.posterItems.length / 2) //通过设置按钮的index来保证永远在前面，永远大于一半的图片个数 向上取整 zIndex不能有- 并且大写
            // });
            // this.nextBtn.css({
            //     width: w,
            //     height: h,
            //     zIndex: Math.ceil(this.posterItems.length / 2)
            // });
            //设置第一帧位置
            this.postFirstItem.css({
                left: w,
                width: this.setting.postWidth,
                height: this.setting.postHeight,
                zIndex: Math.floor(this.posterItems.length / 2) //向下取整 照片不与按钮冲突
            });

        },
        //设置剩余广告位置
        setPosterPosition: function() {
            var self = this;
            var sliceItem = this.posterItems.slice(1); //除去第一帧的
            var sliceSize = sliceItem.length / 2;
            var rightSlice = sliceItem.slice(0, sliceSize); //右侧的帧数
            var level = Math.floor(this.posterItems.length / 2); //层级关系 z-index

            var leftSlice = sliceItem.slice(sliceSize); //左侧帧数

            var rw = this.setting.postWidth;
            var rh = this.setting.postHeight;
            var gap = ((this.setting.width - this.setting.postWidth) / 2) / level;
            var firsLeft = ((this.setting.width - this.setting.postWidth) / 2);
            var offsetLeft = firsLeft + rw; //第一帧图片最右侧的left值
            //设置右侧的css样式
            rightSlice.each(function(i) {
                level--;
                rw = rw * self.setting.scale; //每一次都乘以系数
                rh = rh * self.setting.scale; //每一次都乘以系数
                $(this).css({
                    zIndex: level, //来设置当前对象的层级关系
                    width: rw,
                    height: rh,
                    opacity: 1 / (++i),
                    left: offsetLeft + (i++) * gap - rw,
                    top: self.setVertualAlign(rh)
                })
            });
            //设置左侧CSS样式
            var lw = rightSlice.last().width(); //通过对称取得宽度
            var lh = rightSlice.last().height(); //通过对称取得高度
            var oloop = Math.floor(this.posterItems.length / 2); //左侧的层级关系 z-index
            leftSlice.each(function(i) {
                $(this).css({
                    zIndex: i, //来设置当前对象的层级关系
                    width: lw,
                    height: lh,
                    opacity: 1 / (oloop),
                    left: gap * (i++),
                    top: self.setVertualAlign(lh)
                });
                //把参数变化放在后面，先让参数执行一次
                lw = lw / self.setting.scale;
                lh = lh / self.setting.scale;
                oloop--;
            });
        },
        //设置垂直对其
        setVertualAlign: function(height) {
            var self = this;
            var vertualType = self.setting.verticalAlign;
            var top = 0;
            /*if(vertualType==="middle"){
                 top=(self.setting.height-height)/2
            }else if(vertualType==="top"){
                 top=0;
            }else if(vertualType==="bottom"){
                 top=self.setting.height-height;
            } else{
                top=(self.setting.height-height)/2
            }*/
            switch (vertualType) {
                case "middle":
                    return top = (self.setting.height - height) / 2;
                    break;
                case "top":
                    return top = 0;
                    break;
                case "bottom":
                    return top = self.setting.height - height;
                    break;
            }
        },
        /*旋转函数*/
        carouseRotate: function(dir) {
            var _this_ = this; //这个this保存对Carousel的引用
            var zIndexArryLeft = []; //为zIndex保存一个数组，来存储在遍历对象过程中存储的数组
            var zIndexArryRight = []; //为zIndex保存一个数组，来存储在遍历对象过程中存储的数组
            if (dir === "left") { //当前点击的这一帧的参数变成前一帧的参数
                this.posterItems.each(function() { //遍历每一个对象
                    var self = $(this); //当前的jquery对象，保存起来
                    // var peisi = self.attr("img-order");
                    // console.log(self);
                    var prev = self.prev().get(0) ? self.prev() : _this_.postLastItem; //获取向左旋转过程中下一个对象
                    var width = prev.width(); //获取下一个对象的参数
                    var height = prev.height(); //获取下一个对象的参数
                    var zIndex = prev.css("zIndex"); //获取下一个对象的参数
                    // console.log(zIndex);
                    var opacity = prev.css("opacity"); //获取下一个对象的参数
                    var left = prev.css("left"); //获取下一个对象的参数
                    var top = prev.css("top"); //获取下一个对象的参数
                    zIndexArryLeft.push(zIndex);
                    /*设置当前对象动画过渡过程*/
                    self.animate({
                        width: width,
                        height: height,
                        //zIndex:zIndex,
                        opacity: opacity,
                        left: left,
                        top: top
                    }, _this_.setting.speed, function() {
                        //当动画运动结束的的时候，更改动画标识符
                        _this_.rotateFlag = true;
                    });
                });
                this.posterItems.each(function(i) {
                    $(this).css("zIndex", zIndexArryLeft[i]);
                });
                // console.log(this.posterItems.);
                this.posterItems.each(function(){
                     var self = $(this); 
                     if (self.width()==100) {
                        // console.log(self.attr("img-order"));
                     }
                })
            } else if (dir === "right") { //当前点击的这一帧的参数变成后一帧的参数
                this.posterItems.each(function() { //遍历每一个对象
                        var self = $(this); //当前的jquery对象，保存起来
                        var next = self.next().get(0) ? self.next() : _this_.postFirstItem; //获取向左旋转过程中下一个对象
                        var width = next.width(); //获取下一个对象的参数
                        var height = next.height(); //获取下一个对象的参数
                        var zIndex = next.css("zIndex"); //获取下一个对象的参数
                        var opacity = next.css("opacity"); //获取下一个对象的参数
                        var left = next.css("left"); //获取下一个对象的参数
                        var top = next.css("top"); //获取下一个对象的参数
                        zIndexArryRight.push(zIndex);
                        /*设置当前对象动画过渡过程*/
                        self.animate({
                            
                            width: width,
                            height: height,
                            //zIndex:zIndex,
                            opacity: opacity,
                            left: left,
                            top: top
                        }, _this_.setting.speed, function() {
                            //当动画运动结束的的时候，更改动画标识符
                            _this_.rotateFlag = true;

                        });
                    })
            }
            this.posterItems.each(function(i) {
                $(this).css("zIndex", zIndexArryRight[i]);
            });
        },
        /*自动执行函数*/
        autoPlay: function() {
            var self = this; //保存对Carousel引用
            self.timer = setInterval(function() {
                self.nextBtn.click();
            }, self.setting.delay);
            /*this.posterItems.mouseover(function(){
                clearInterval(self.timer);
            });
            this.posterItems.mouseout(function(){
                clearInterval(self.timer);//防止效果叠加，需离开的时候在清除一次
                self.autoPlay();
            })*/

            this.posterItems.hover(function() { //当鼠标位于图片上
                clearInterval(self.timer);
            }, function() {
                clearInterval(self.timer); //防止效果叠加，需离开的时候在清除一次
                self.autoPlay();
            });
            this.nextBtn.hover(function() { //当鼠标位于按钮上
                clearInterval(self.timer);
            }, function() {
                clearInterval(self.timer); //防止效果叠加，需离开的时候在清除一次
                self.autoPlay();
            });
            this.prevBtn.hover(function() { //当鼠标位于按钮上
                clearInterval(self.timer);
            }, function() {
                clearInterval(self.timer); //防止效果叠加，需离开的时候在清除一次
                self.autoPlay();
            });
        },



        //获取配置参数
        getSetting: function() {
            var setting = this.poster.attr("data-setting");
            if (setting && setting != "") {
                return $.parseJSON(setting);
            } else {
                return {};
            }
        },

    };
    window["Carousel"] = Carousel; //全局对象注册，把Carousel暴露给全局对象
})(jQuery); //传递进入jQuery用$接收
Carousel.init($('.caroursel'))